<template>
  <div>
    <NormalForm pageTitle="群列表" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt"
      @handleQuery="handleQuery" @handleReset="handleReset">
      <template slot="block">
        <!-- 模块 -->
        <div class="module-list">
          <div class="module">
            <div class="number">{{ todayGroupAddCount }}</div>
            <div class="label">新增客户群</div>
          </div>
          <div class="module">
            <div class="number">{{ totalGroupCount }}</div>
            <div class="label">群总数</div>
          </div>
          <div class="module">
            <div class="number">{{ todayMemberAddCount }}</div>
            <div class="label">今日新增人数</div>
          </div>
          <div class="module">
            <div class="number">{{ totalMemberCount }}</div>
            <div class="label">群总人数</div>
          </div>
        </div>
      </template>
    </NormalForm>
    <div class="g-card">
      <div class="right-btn">
        <el-button type="primary" :disabled="checkBool" plain @click="batchLabeling">批量打标签
        </el-button>
      </div>
      <!-- 表格 -->
      <div style="padding: 0px 20px 20px 20px">
        <el-table v-loading="loading" :data="tableList" style="width: 100%" height="415"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="45" align="center" fixed></el-table-column>
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="群ID" align="center" prop="chatId" show-overflow-tooltip :width="140"></el-table-column>
          <el-table-column label="群名称" align="center" prop="groupName" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="群主" align="center" prop="groupLeaderName" show-overflow-tooltip :width="140" />
          <el-table-column label="群标签" align="center" prop="tagVOS" :width="200">
            <template slot-scope="scope">
              <tagGroupShowTable :tagGroup="scope.row.tagVOS" />
            </template>
          </el-table-column>
          <el-table-column label="群人数" align="center" prop="memberCount" width="100">
          </el-table-column>
          <el-table-column label="今日新增" align="center" prop="toDayMemberNum" width="100">
          </el-table-column>
          <el-table-column label="今日流失" align="center" prop="todayLossMemberCount" width="100">
          </el-table-column>
          <el-table-column label="群状态" align="center" prop="delFlag" width="140">
            <template slot-scope="{ row }">
              <el-tag type="success" v-if="row.delFlag === 0">有效</el-tag>
              <el-tag type="success" v-else-if="row.delFlag === 1">
                已解散
              </el-tag>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip
            width="160px"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="80" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <div class="option-span">
                <span @click="detail(row)">详情</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
          @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
    <!-- 批量打标签 -->
    <el-dialog title="打标签" :visible.sync="tagVisible" width="400px" :close-on-click-modal="false">
      <el-form ref="shareForm" :model="shareForm" :rules="rules" label-width="60px">
        <el-form-item label="标签" prop="tagVOS">
          <tag-group v-model="shareForm.tagVOS" maxWidth="300px" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="tagVisible = false">取 消</el-button>
        <el-button @click="handleAddTag" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findCountTotal, findOwnerList, makeGroupTag, queryTaskList } from '@/api/groupList/groupList'

export default {
  name: 'GroupList',
  data() {
    const nameValidate = (rule, value, callback) => {
      if (value) {
        if (value.length > 160) {
          callback(new Error('您录入字数超过160字'))
        } else {
          callback()
        }
      }
    }
    return {
      queryForm: {
        groupName: '',
        groupManager: '',
        tag: '',
        deptId: null, // 管理机构id
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '群聊名称',
          value: '',
          prop: 'groupName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '群主',
          value: '',
          prop: 'groupManager',
          type: 'SELECT',
          emunName: 'managerList'
        },
        // {
        //   label: '标签',
        //   value: '',
        //   prop: 'tag',
        //   type: 'SELECT',
        //   emunName: 'tagList'
        // },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: ''
        },
      ],
      enumOpt: {
        managerList: [],
        tagList: [],
      },
      total: 0,
      loading: false,
      checkBool: true,
      tagVisible: false,
      shareForm: {
        tagVOS: [],
      },
      todayGroupAddCount: '0',
      totalGroupCount: '0',
      todayMemberAddCount: '0',
      totalMemberCount: '0',
      queryCreateList: [],
      modifyForm: {
        remark: '',
      },
      saveLoading: false,
      modifyVisible: false,
      value: '',
      tableList: [],
      rules: {
        tagVOS: [
          { required: true, message: '标签不能为空', trigger: 'blur' },
          { required: true, validator: nameValidate, trigger: 'blur' },
        ],
      },
      rowContent: null,
      selectedRow: [],
    }
  },
  created() {
    this.enumListFn()
    this.handleQuery()
    this.findCountTotal()
  },
  methods: {
    enumListFn() {
      findOwnerList().then((res) => {
        console.log(res.data)
        if (res.code == 200) res.data.forEach(item => {
          this.enumOpt.managerList.push({ dictLabel: item.groupLeaderName, dictValue: item.groupLeaderId })
        })
      }).catch(() => { })
      // querytagVOS().then((res) => {
      //   if (res.code === 200) res.data.forEach(item => {
      //     this.enumOpt.tagList.push({ })
      //   })
      // }).catch(() => {})
    },
    // 远程搜索任务名称 + 搜索
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.queryTaskListFn();
    },
    queryTaskListFn() {
      this.loading = true;
      let obj = {
        groupName: this.queryForm.groupName,
        groupLeaderId: this.queryForm.groupManager,
        tagId: this.queryForm.tag || [],
        deptId: this.queryForm.deptId,
        queryCreateList: this.queryForm.queryCreateList,
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      }
      queryTaskList(obj).then((res) => {
        if (res.code === 200 && res.rows.length) {
          // res.rows.forEach((item) => {
          //     if (item.tagVOS) item.tagVOS = item.tagVOS.split(',')
          //   }
          // )
          this.tableList = res.rows || []
          this.total = res.total || 0
        }
        this.loading = false;
      })
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.queryTaskListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.queryTaskListFn()
    },
    // 重置
    handleReset() {
      this.queryForm = {
        groupName: '',
        groupManager: '',
        tag: '',
        deptId: null,
        pageNum: 1,
        pageSize: 20
      };
      this.queryTaskListFn()
    },

    // 表格勾选事件
    handleSelectionChange(row) {
      console.log(row)
      this.selectedRow = row
      if (row && row.length > 0) {
        this.checkBool = false
      } else {
        this.checkBool = true
      }
    },
    // 详情
    detail(row) {
      this.$router.push({
        name: 'GroupListDetail',
        query: { chatId: row.chatId },
      })
    },
    // 打标签
    batchLabeling() {
      this.shareForm.tagVOS = []
      this.tagVisible = true
    },
    // 确认添加标签
    handleAddTag(value) {
      let obj = {
        chatId: '',
        tagVOS: this.shareForm.tagVOS,
      }
      let str = ''
      this.selectedRow.forEach((item) => {
        str += item.chatId + ','
      })
      str =
        str.substring(str.length - 1) == ','
          ? str.substring(0, str.length - 1)
          : str
      obj.chatId = str;
      makeGroupTag(obj).then((res) => {
        if (res.code == 200) {
          this.msgSuccess('标签添加成功！')
          this.shareForm.tagVOS = []
          this.tagVisible = false
          this.handleQuery()
        }
      }).catch(() => { })
    },

    findCountTotal() {
      findCountTotal().then(res => {
        this.todayGroupAddCount = res.data.todayGroupAddCount
        this.todayMemberAddCount = res.data.todayMemberAddCount
        this.totalGroupCount = res.data.totalGroupCount
        this.totalMemberCount = res.data.totalMemberCount
      }).catch(res => {
      })
    },
    // 修改备注
    modifyRemark(row) {
      this.rowContent = row
      this.modifyVisible = true
      this.modifyForm.remark = ''
      this.$nextTick(() => {
        this.$refs.modifyForm.clearValidate()
      })
    },
  },
}
</script>


<style lang="scss" scoped>
@import '@/styles/base.scss';

.module-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;

  .module {
    width: 300px;
    height: 100px;
    background: #fafafa;
    border-radius: 4px;

    // border: 1px solid #eeeeee;
    .number {
      font-size: 18px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      // font-weight: bold;
      color: #393b44;
      text-align: center;
      margin-top: 30px;
    }

    .label {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #505050;
      text-align: center;
      margin-top: 8px;
    }
  }
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

::v-deep.el-button.is-disabled.is-plain {
  background-color: #ffffff !important;
  border-color: #e6ebf5 !important;
  color: #c0c4cc !important;
}

::v-deep.set-popper {
  max-width: 431px;
}

::v-deep.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
